<template>
    <div id="main">
      <div id="" class="card">
        <div style="width: 1000px;height: auto; margin: auto;padding: 5px">
          <!--操作按钮-->
          <el-form :inline="true" class="demo-form-inline center" >
            <el-row :gutter="18">
              <el-col :span="6"><el-button type="success" icon="el-icon-success" plain @click="addOutStock">提交</el-button></el-col>
              <el-col :span="3"><el-button icon="el-icon-refresh" plain onclick="history.go(-1)">返回</el-button></el-col>
            </el-row>
          </el-form>
          <el-form :inline="true" class="demo-form-inline">
            <el-row>
              <el-col :span="10">
                <el-form-item label="订单编号:">
                  <input v-model="orders.orderId" style="border: none" readonly>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="总数量:">
                  <input v-model="orders.orderNum"  style="border: none">
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="总金额:">
                  <input v-model="orders.totalAmount"  style="border: none">
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="登记人:">
                  <input v-model="outGather.storage" style="border: none" readonly>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="登记时间:">
                  <el-input v-model="outGather.registerTime" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!--数据表格-->
            <el-table
                :data="ordersDetail">
              <el-table-column
                  prop="imgUrl"
                  label="图片"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="productName"
                  label="商品名称"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="price"
                  label="单价(元)"
                  width="120">
                <template slot-scope="scope">
                  <span>{{scope.row.price}}元</span>
                </template>
              </el-table-column>
              <el-table-column
                  prop="amount"
                  label="数量(件)"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="stockId"
                  label="仓库(最大存储量/当前存储)"
                  width="230">
                <template slot-scope="scope">
                  <el-select v-model="outGather.stockId" @change="addDetail(scope.row)">
                    <el-option
                        v-for="type in stock"
                        :label="type.stockName+'('+type.maxCapacityAmount+'/'+type.stockAmount+')'"
                        :value="type.id"
                        :key="type.id">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                  prop="subtotal"
                  label="小计(元)"
                  width="120">
                <template slot-scope="scope">
                  <span>{{scope.row.subtotal}}元</span>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
    </div>
  </template>

  <script>
    export default {
      name: "OutStockDetail",
      data() {
        return {
          //仓库数据
          stock:[],
          //入库数据
          outGather:{
            stockId:'',
            storage:'',
            registerTime:'',
            reason:'R001-1',
            checkTag:'S001-1',
            register:''
          },
          //订单
          orders: {},
          //订单详情
          ordersDetail: [],
          //出库明细
          outStockDetail:[],
        }
      },
      created() {
        this.outGather.registerTime = this.nowDate()
        this.queryStock()
        this.selOrderOutStock()
      },
      methods: {
        //获取当前时间
        nowDate() {
          let getTime = new Date().getTime();
          let time = new Date(getTime);
          let year = time.getFullYear();//年
          let month = (time.getMonth() + 1).toString().padStart(2, '0');
          let date = time.getDate().toString().padStart(2, '0');
          let hour = time.getHours().toString().padStart(2, '0');
          let minute = time.getMinutes().toString().padStart(2, '0');
          let second = time.getSeconds().toString().padStart(2, '0');
          return (
              year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
          )
        },
        addDetail(){
          for(let i=0;i<this.orders.length;i++){
            console.log(this.outGather.stockId)
            let detail={}
            detail.gatherId=this.outGather.stockId
            detail.productId=this.ordersDetail[i].productId
            detail.productName=this.ordersDetail[i].productName
            detail.amount=this.ordersDetail[i].count
            detail.costPrice=this.ordersDetail[i].price
            detail.subtotal=this.ordersDetail[i].subtotal
            this.outStockDetail.push(detail)
          }
        },
        //初始化仓库列表
        async queryStock(){
          const {data: res} = await this.$http.post
          (`/stock/queryAll`)
          this.stock=res
        },
        //查询要出库的订单
        async selOrderOutStock(){
          const id=sessionStorage.getItem("OutStock")
          const {data :res}=await this.$http.post
          (`order/getOne/${id}`)
          this.orders=res

          const {data :ordersDetail}=await this.$http.post
          (`orderDetails/getByParentId/${id}`)
          this.ordersDetail=ordersDetail
        },
        //入库收货
        async addOutStock(){
          const id=sessionStorage.getItem("OutStock")
          this.outGather.total=this.orders.orderNum
          this.outGather.amount=this.orders.totalAmount
          console.log(this.outGather)
          this.outGather.list=this.ordersDetail
          const {data :res}=await this.$http.post
          (`outGather/addOut/${id}`,this.outGather)
          if(res=="ok"){
            this.$message({
              message: '操作成功！需要审核',
              type: 'success'
            })
            this.$router.push("/outOrder")
          }
        }
      }
    }
  </script>

  <style scoped>
    .card {
      box-sizing: border-box;
      padding: 20px;
      overflow-x: hidden;
      background-color: #ffffff;
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      box-shadow: 0 0 12px #0000000d
    }
    .page{
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  </style>